<template>
  <view class="login-container">
    <view class="header-bg">
      <view class="header-title">验证码登录</view>
      <view class="header-hello">
				
      </view>
    </view>
    <view class="login-card">

      <view class="input-row phone-row">
				<image class="header-cat"
					src="/static/image/mao.png"
					mode="scaleToFill"
				/>
        <text class="input-prefix">+86</text>
        <view class="divider"></view>
        <input class="input-main" placeholder="请输入手机号" placeholder-style="color:#999" v-model="phone" />
      </view>
      <view class="input-row code-row" style="margin-top: 40rpx;">
        <input class="input-main" placeholder="请输入验证码" placeholder-style="color:#999" v-model="code" />
        <text class="get-code" :class="{disabled: codeTimer > 0}" @click="handleGetCode">{{ codeTimer > 0 ? codeTimer + 's' : '获取验证码' }}</text>
      </view>
      <view class="policy-row">
        <checkbox class="policy-checkbox" />
        <text class="policy-text">已阅读并同意</text>
        <text class="policy-link" @click="goAgreement('隐私政策')">隐私政策</text>
        <text class="policy-text">和</text>
        <text class="policy-link" @click="goAgreement('用户协议')">用户协议</text>
      </view>
      <button class="login-btn" @click="login">登录</button>
      <view class="no-code">没有收到验证码？</view>
    </view>
    <view class="bottom-area">
  
      <view class="third-buttons">
				<PartyLogin />

      </view>
    </view>
  </view>
</template>

<script>
import PartyLogin from './component/PartyLogin.vue'
export default {
	components: {
		PartyLogin
	},
	data() {
		return {
			phone: '',
			code: '',
			codeTimer: 0,
			codeTimerId: null
		}
	},
  methods: {
    login() { 
      uni.setStorageSync('token', 'hello')
      uni.navigateTo({
        url: '/pages/register/index'
      })
    },
		goAgreement(type) {
			uni.navigateTo({
				url: `/pages/login/agreement?type=${type}`
			})
		},
		handleGetCode() {
			if (this.codeTimer > 0) return;
			if (!/^1[3-9]\d{9}$/.test(this.phone)) {
				uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
				return;
			}
			// 这里可以加发送验证码的请求
			this.codeTimer = 60;
			this.codeTimerId = setInterval(() => {
				this.codeTimer--;
				if (this.codeTimer <= 0) {
					clearInterval(this.codeTimerId);
					this.codeTimerId = null;
				}
			}, 1000);
		}
	},
	beforeDestroy() {
		if (this.codeTimerId) clearInterval(this.codeTimerId);
	}
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.header-bg {
  width: 100%;
  height: 400rpx;
  background: #54b4fb;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.header-title {
  color: #fff;
  font-size: 44rpx;
  font-weight: bold;
  margin-left: 40rpx;
  margin-top: 188rpx;
  letter-spacing: 2rpx;
}
.header-hello {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hello-bubble {
  background: rgba(255, 255, 255, 0.8);
  color: #54b4fb;
  font-size: 24rpx;
  border-radius: 30rpx;
  padding: 4rpx 24rpx;
  margin-bottom: 6rpx;
}
.header-cat {
  width: 200rpx;
  height: 240rpx;
	position: absolute;
	top:  -210rpx;
	right: 50px;
	z-index: -1;
}
.login-card {
	z-index: 99999;
  width: 100%;
  background: #fff;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  margin-top: -40rpx;
  padding: 70rpx 40rpx 30rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  z-index: 10;
}
.input-row {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 50rpx;
  padding: 0 30rpx;
  height: 120rpx;
  margin-bottom: 24rpx;
}
.phone-row {
  padding-left: 20rpx;
}
.input-prefix {
  color: #333;
  font-size: 32rpx;
  padding: 0 16rpx;
}
.divider {
  width: 2rpx;
  height: 40rpx;
  background-color: #ddd;
  margin: 0 16rpx;
}
.input-main {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 32rpx;
  color: #333;
  height: 100%;
}
.get-code {
  color: #1ecb8c;
  font-size: 30rpx;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}
.get-code.disabled {
  color: #bbb !important;
  cursor: not-allowed;
}
.policy-row {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #999;
  margin-bottom: 40rpx;
  margin-top: 4rpx;
  padding-left: 6rpx;
}
.policy-checkbox {
  transform: scale(0.8);
  margin-right: 6rpx;
}
.policy-text {
  color: #999;
}
.policy-link {
  color: #1ecb8c;
  margin: 0 6rpx;
}
.login-btn {
  width: 100%;
  height: 106rpx;
  background: #000;
  color: #fff;
  border-radius: 48rpx;
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 28rpx;
  border: none;
  letter-spacing: 2rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-code {
  color: #999;
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 18rpx;
  text-decoration: underline;
}
.bottom-area {
  width: 100%;
  padding: 0 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 200rpx;
}
.last-login-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}
.last-login-btn {
  display: flex;
  align-items: center;
  background: #fff;
  color: #999;
  border: 1rpx solid #eee;
  border-radius: 30rpx;
  font-size: 28rpx;
  padding: 4rpx 12rpx 4rpx 24rpx;
  height: 56rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.last-login-text {
  margin-right: 8rpx;
  color: #999;
}
.third-buttons {
  display: flex;
  justify-content: center;
  gap: 32rpx;
}
.third-btn {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background: #d9d9d9;
  font-size: 32rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin: 0;
  padding: 0;
}
.third-btn.last-login {
  background: #000 !important;
  color: #fff !important;
  margin-left: 8rpx;
  width: 46rpx;
  height: 46rpx;
  min-width: 46rpx;
  min-height: 46rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconfont {
  font-size: inherit;
}
</style>
